<template>
	<!-- vue content -->
	<view class="common-body bg-common" style="position: relative;">
		<!-- <image src="@/static/img/title_bg.jpg" class="match-width" style="" mode="widthFix">
		</image> -->
		<bodyCustom title="队站开放及站内公益培训">
			<view class="pd-lr25 ver pd-t20">
				<view class="hor ">
					<view class="font-text-color-explain" style="">讲师简介</view>
				</view>

				<view class="bg-white corner20 pd-lr25 pd-tb25 mg-t-20" style="position: relative">
					<view class="hor ver-center">
						<image :src="detail.teacherPhoto" mode="aspectFill" class="match-width corner10"
							style="width: 100rpx;height: 120rpx;" @error="onImageError">
						</image>
						<view class="mg-l-20 ver" style="height: 140rpx;">

							<view class="uni-bold font16 ">{{detail.teacherName}}</view>
							<view class="flex1"></view>
							<view class="font14 font-text-color-main_body line1">
								{{detail.brigadeName}}
							</view>
							<view class="pd-tb15"></view>
						</view>
					</view>
					<scroll-view style="max-height: 300rpx;" scroll-y="true" class="match-width mg-t-20">
						<view v-html="detail.teacherIntroduce"></view>
					</scroll-view>
				</view>
				<view class="hor mg-t-40">
					<view class="font-text-color-explain" style="">课程简介</view>
				</view>

				<view class="mg-t-20 bg-white corner20 pd-lr25 pd-tb25" style="position: relative;">
					<rich-text :nodes="detail.lessonIntroduce" class=""></rich-text>
				</view>

				<view class="bg-white pd-lr25 pd-tb25 corner20 mg-t-40">
					<view class="font18 uni-bold match-width  ">{{detail.lessonName}}</view>
					<view style="height: 1px;" class="match-width divider-hor mg-t-20"></view>
					<!-- <view class="match-width font16 uni-bold">
						{{detail.brigadeName}}
					</view> -->
					<view class="font-text-color-explain mg-t-20">地&nbsp;&nbsp;&nbsp;&nbsp;区：{{detail.distinctName}}
					</view>
					<view class="hor mg-t-20">
						<view class="font-text-color-explain flex1">培训地点：{{detail.trainAddress}}</view>
						<view class="font-color-main uni-bold pd-l-20" @click="onClickGuide()">导航</view>
					</view>
					<view class="font-text-color-explain mg-t-10">联系电话：{{detail.linkPhone}}</view>
					<view class="font-text-color-explain mg-t-10">点位电话：{{detail.addressPhone}}</view>

					<view class="font-text-color-explain mg-t-10">开始时间：{{detail.showTime}}</view>
					<view class="hor ver-center">
						<view class="font-text-color-explain flex1 mg-t-10" v-if="authUser!=null">
							预约手机：{{authUser.phone}}</view>
						<view class="font-text-color-explain">
							人数：{{detail.orderQuantity}}/{{detail.quantity+detail.extraQuantity}}</view>
					</view>
					<!-- <view class="hor ver-center">
						<view class="font-text-color-explain flex1" v-if="authUser!=null">联系电话：{{authUser.addressPhone}}
						</view>
					</view> -->
					<view class="mg-t-40 hor hor-center" style="" v-if="detail.orderStatus==2">
						<view style="" class="pd-tb15 bg-main font-color-white text-center corner10 match-width"
							@click="showOrder=true">确认预约</view>
					</view>
					<view class="mg-t-40 ver ver-center hor-center" style="" v-if="detail.orderStatus==1">
						<view class="font16 uni-bold">您已预约成功</view>
						<view class="font-color-red">**请提前15分钟到达指定地点参加培训**</view>
						<view class="font-color-blue " @click="onClickRecord">查看预约记录</view>
					</view>
					<view class="mg-t-40 ver ver-center hor-center" style="" v-if="detail.orderStatus==3">
						<view class="font16 uni-bold">已约满</view>
						<view class="font-color-red">**该培训已被约满，不可预约**</view>
					</view>
					<view class="mg-t-40 ver ver-center hor-center" style="" v-if="detail.orderStatus==4">
						<view class="font16 uni-bold">已结束</view>
						<view class="font-color-red">**该培训已结束，不可预约**</view>
					</view>
				</view>
				<view style="height: 10vh;"></view>
			</view>

		</bodyCustom>

		<u-popup v-model="showOrder" mode="bottom" border-radius="14">
			<view class="ver pd-lr20 pd-tb50 ver-center">
				<image src="../../static/img/gzh_qrcode.jpg" style="width: 60vw;height: 60vw;"
					show-menu-by-longpress="true"></image>
				<view>请先长按关注公众号，以便及时接收通知</view>
				<view style="width: 400rpx;" class="pd-tb15 bg-main font-color-white text-center corner100 mg-t-40"
					@click="onClickYuYue()">我已关注确认预约</view>
			</view>
		</u-popup>

		<view style="height: 75rpx;"></view>
	</view>


</template>
<script>
	import Vue from 'vue'

	let _this
	export default {
		data() {
			return {
				authUser: null,
				lessonOrderId: "",
				detail: {},

				showOrder: false
			};
		},
		onReady: function() {
			var _this = this

		},
		onShow() { //页面恢复展示时

		},
		onLoad(option) { ////页面加载时
			_this = this
			this.initUser(option, this, true);
			this.lessonOrderId = option.lessonOrderId
			if (this.lessonOrderId == null) {
				uni.navigateTo({
					url: "/pages/lesson/lessonOrder"
				})
			}
			this.getData()
		},
		onPageScroll(res) {
			// console.log("页面滚动了")
			uni.$emit('onPageScroll', res.scrollTop);
		},
		methods: {
			getData() {
				_this.sendRequest({
					url: "lessonOrder/getLessonFromWx",
					data: {
						openId: uni.getStorageSync('openid'),
						lessonOrderId: this.lessonOrderId
					},
					method: "GET",
					page: _this,
					success: function(res) {
						_this.detail = res.data
					},
					codeFail: function(e) {},
					fail: function(e) {}
				})
			},
			requestSub() {
				uni.requestSubscribeMessage({
					tmplIds: ['eehBr0bbd7nnLfUFWeKpa6e87Cj50ygw3zgObVKTlPQ',
						'19ORxXNYLqJ7fDc4FWG33ScuqUmpLTkz5CYoPc2ilhU'
					],
					success(res) {


					}
				})
			},
			onClickYuYue() {
				if (!this.initUser(null, this, true)) {
					return
				}
				if (_this.platform == 4) {
					_this.requestSub()
				}
				uni.showModal({
					title: '提示',
					content: "是否确认预约地址为：" + _this.detail.brigadeName + "(" + _this.detail.trainAddress + ")",
					confirmText: "预约",
					success: function(res) {
						if (res.confirm) {
							_this.sendRequest({
								url: "orderRecord/wxOrder",
								data: {
									openId: uni.getStorageSync('openid'),
									lessonOrderId: _this.detail.lessonOrderId
								},
								method: "POST",
								page: _this,
								success: function(res) {
									uni.showModal({
										title: '提示',
										content: "预约成功",
										confirmText: "我知道了",
										showCancel: false,
										success: function(res) {
											_this.getData()
										}
									});
									_this.showOrder = false
								},
								fail: function(e) {}
							})
						}

					}
				});

			},
			onClickRecord() {
				uni.reLaunch({
					url: "/pages/tabbar/my"
				})
			},
			onImageError() {
				console.log("errere")
				this.detail.teacherPhoto = '../../static/img/default_avatar.jpg'
			},
			onClickGuide() {
				const latitude = _this.detail.latitude;
				const longitude = _this.detail.longitude;
				uni.openLocation({
					latitude: latitude,
					longitude: longitude,
					name: _this.detail.lessonName,
					address: _this.detail.trainAddress,
					success: function() {
						console.log('success');
					}
				});
			}
		}
	};
</script>

<style>
	html,
	body,
	page {
		width: 100%;
		height: 100%;
		background-color: #edf3f1;
	}
</style>